<template>
  <div class="w">
    <div class="header">
      <div><i class="iconfont icon-fanhui" @click="back"></i></div>
      <div><span class="title">写评价</span></div>
      <div><el-button @click="addRate">发布</el-button></div>
    </div>
    <div class="info">
      <div class="info_card">
        <div class="card_top">
          <div class="top_title">{{ orderInfo.shop.shopName }}</div>
          <div class="top_score">
            <span>总体</span>
            <el-rate v-model="addRateForm.rateScore" show-text text-color="#ff9900" :texts="texts"></el-rate>
          </div>
        </div>
        <div class="card_middle">
          <div class="middle_text">
            <el-input type="textarea" v-model="addRateForm.rateText"></el-input>
          </div>
          <div class="middle_img">
            <div class="img_list" v-for="(item, index) in addRateForm.rateImgList" :key="index">
              <div v-if="addRateForm.rateImgList.length != 0">
                <el-image :src="item.rateImage" fit="cover"></el-image>
                <div class="close" @click="deleteImage(index)">×</div>
              </div>
            </div>
            <div class="img_upload">
              <el-upload
                action="http://localhost:8080/school/image/upload"
                :on-success="uploadSuccess"
                :show-file-list="false"
                :before-upload="beforeUpload"
                multiple
              >
                <div class="upload_icon">
                  <i class="iconfont icon-tupian"></i>
                  <span>上传图片</span>
                </div>
              </el-upload>
            </div>
          </div>
        </div>
        <div class="card_bottom">
          <div class="bottom_left" @click="active">
            <div class="radio" :class="addRateForm.isHide == 1 ? 'radio_active' : ''">
              <i class="iconfont icon-duihao" v-if="addRateForm.isHide == 1"></i>
            </div>
            <div class="text">
              <span>匿名评论</span>
            </div>
          </div>
          <div class="bottom_right">隐藏头像和昵称</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rate: 0,
      orderInfo: [],
      texts: ['非常差', '差', '一般', '满意', '非常满意'],
      addRateForm: {
        userId: '',
        rateScore: 0,
        rateText: '',
        shopId: '',
        isHide: 0,
        rateImgList: [],
        isRate: 0,
        orderId: '',
        rateDishList: [],
        userName: '',
      },
      info: [],
    };
  },

  created() {
    this.orderInfo = this.$route.query.shopInfo;
    this.info = JSON.parse(localStorage.getItem('userInfo'));
  },

  methods: {
    beforeUpload(file) {
      console.log(file);
      const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1);

      const whiteList = ['jpg', 'png'];

      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$message.error('上传文件只能是 jpg、png 格式');
        return false;
      }

      const isLt2M = file.size / 1024 / 1024 < 3;

      if (!isLt2M) {
        return this.$message.error('上传文件大小不能超过 3MB，请选择其他图片');
      }
    },
    async addRate() {
      this.addRateForm.shopId = this.orderInfo.shopId;
      this.addRateForm.userId = this.info.id;
      this.addRateForm.isRate = 1;
      this.addRateForm.orderId = this.orderInfo.id;
      this.addRateForm.userName = this.info.name;
      for (let i = 0; i < this.orderInfo.ordersOrDishDtoList.length; i++) {
        this.addRateForm.rateDishList.push({ dishId: this.orderInfo.ordersOrDishDtoList[i].dishId });
      }
      console.log(this.addRateForm);
      const { data: res } = await this.$http.post('rate/addRate', this.addRateForm);
      if (res.code == 1) {
        this.$router.push('/orders');
        return this.$message.success(res.data);
      } else {
        return this.$message.error('评价发布失败');
      }
    },
    active() {
      if (this.addRateForm.isHide == 0) {
        this.addRateForm.isHide = 1;
        return;
      }
      if (this.addRateForm.isHide == 1) {
        this.addRateForm.isHide = 0;
        return;
      }
    },
    back() {
      this.$router.go(-1);
    },
    //取消上传后删除图片
    async deleteImage(index) {
      const { data: res } = await this.$http.delete('image/deleteImage/' + this.addRateForm.rateImgList[index].rateImage);
      if (res.code == 1) {
        this.addRateForm.rateImgList.splice(index, 1);
        return this.$message.success(res.data);
      } else {
        return this.$message.error(res.msg);
      }
    },
    //接受上传成功的返回的图片名称
    uploadSuccess(reponse) {
      this.addRateForm.rateImgList.push({ rateImage: reponse.data });
    },
  },
};
</script>

<style lang="scss" scoped>
.w {
  height: 100vh;
  width: 100%;
  background-color: #f5f5f5;
  .header {
    height: 60px;
    color: #000000;
    text-align: center;
    position: relative;
    border-bottom: 1px solid #cecee2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon-fanhui {
      font-size: 25px;
      margin-left: 10px;
    }
    .title {
      font-size: 20px;
      letter-spacing: 1px;
    }
    :deep(.el-button) {
      background-color: #f7d246;
      color: #000000;
      margin-right: 10px;
      padding: 10px 13px;
      border-radius: 8px;
    }
  }
  .info {
    padding: 15px;
    margin-top: 15px;
    .info_card {
      background-color: #fefefe;
      border-radius: 10px;
      padding: 10px;
      .card_top {
        border-bottom: 1px solid #f5f5f6;
        .top_title {
          font-size: 20px;
          font-weight: bold;
          color: #000000;
          letter-spacing: 2px;
          margin-bottom: 10px;
        }
        .top_score {
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          span {
            font-size: 18px;
            color: #000000;
            font-weight: bold;
            margin-right: 10px;
            letter-spacing: 2px;
            margin-top: 5px;
          }
          :deep(.el-rate__icon) {
            font-size: 25px;
          }
          :deep(.el-rate__text) {
            color: #9c9c9d !important;
          }
        }
      }
      .card_middle {
        margin-top: 20px;
        background-color: #f7f8f9;
        border-radius: 10px;
        padding: 10px;
        .middle_text {
          :deep(.el-textarea__inner) {
            height: 150px;
            background-color: #f7f8f9;
            border: none;
          }
        }
        .middle_img {
          display: flex;
          flex-wrap: wrap;
          margin-top: 10px;
          .img_list {
            position: relative;
            :deep(.el-image) {
              height: 90px;
              width: 90px;
              border-radius: 10px;
              margin-right: 5px;
            }
            .close {
              color: #fefefe;
              background-color: rgba(0, 0, 0, 0.5);
              border-radius: 50px;
              height: 10px;
              width: 10px;
              position: absolute;
              top: 7px;
              right: 11px;
              padding: 5px;
              line-height: 7px;
            }
          }
          .img_upload {
            :deep(.el-upload) {
              height: 90px;
              width: 90px;
              border-radius: 10px;
              border: 1px dashed #cdcecf;
              .upload_icon {
                margin-top: 15px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                span {
                  color: #a7a8a8;
                }
                .icon-tupian {
                  color: #a1a2a2;
                  font-size: 35px;
                }
              }
            }
          }
        }
      }
      .card_bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
        .bottom_left {
          display: flex;
          align-items: center;
          .radio {
            height: 20px;
            width: 20px;
            border-radius: 50px;
            border: 1px solid #e9e9e9;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 5px;
          }
          .radio_active {
            background-color: #fec306;
          }
          .text {
            font-size: 17px;
            color: #000000;
            letter-spacing: 2px;
          }
        }
        .bottom_right {
          color: #bcbcbc;
          font-size: 12px;
          letter-spacing: 2px;
        }
      }
    }
  }
}
</style>